<template>
	<view class="orderDetail" v-if="form.id">
		<view class="order-status-wrapper">
			<image v-if="form.orderStatus === 0"
				src="https://cdpresources.hobon.cc/city-warehouse-app/static/waitPay.png" mode="widthFix" class="icon">
			</image>
			<image v-else-if="form.orderStatus === 1"
				src="https://cdpresources.hobon.cc/city-warehouse-app/static/tradeSuccess.png" mode="widthFix"
				class="icon"></image>
			<image v-else-if="form.orderStatus === 2"
				src="https://cdpresources.hobon.cc/city-warehouse-app/static/inGroupCancel.png" mode="widthFix"
				class="icon"></image>
			<view class="info-wrapper">
				<view class="status">
					<text>{{ orderStatusListByBuy[form.orderStatus].name }}</text>
					<!-- <text v-if="form.order.orderStatus===3">(提货码：{{ form.order.checkCode }})</text>
					<text v-if="form.order.orderStatus===2">(交货码：{{ form.order.checkCode }})</text> -->
					<!-- <view class="time" v-if="form.orderStatus === 0">
						<text>剩余支付时间：</text>
						<uni-countdown style="margin-top: 5upx;" color="#ffffff" splitorColor="#ffffff"
							:show-day="false" :show-hour="false" :minute="payMinute" :second="paySecond"
							:showColon="false"></uni-countdown>
					</view> -->
				</view>
				<view class="info">
					{{ orderStatusListByBuy[form.orderStatus].tip }}
				</view>
			</view>
		</view>
		<view class="form-wrapper">
			<view class="title-wrapper">
				<view class="title">
					自提点信息
				</view>
			</view>
			<view class="item">
				<view class="label">
					提货点：
				</view>
				<view class="value">
					{{ form.pickupPointName }}
				</view>
			</view>
			<view class="item">
				<view class="label">
					提货点地址：
				</view>
				<view class="value">
					{{ form.pickupPointAddress }}
				</view>
			</view>
			<view class="item">
				<view class="label">
					联系电话：
				</view>
				<view class="value">
					{{ form.pickupServiceTel }}
				</view>
			</view>
		</view>
		<view class="products-wrapper">
			<view class="title-wrapper">
				<view class="title">
					订单货品
				</view>
			</view>
			<view class="info-wrapper">
				<view class="info">
					<text class="name">
						{{ form.supplyWarehouseShortname }}
					</text>
				</view>
			</view>
			<view class="products-list">
				<view class="product" v-for="(item,index) in form.itemList" :key="index" @click="goProductDetail(item)">
					<view class="product-box">
						<image
							:src="item.productImage || 'https://cdpresources.hobon.cc/procurement-mini-program/static/noProduct.png'"
							mode="aspectFill" class="icon"></image>
						<view class="product-info">
							<view class="title">
								{{ item.productName }}
							</view>
							<view class="spec">
								<text>规格：{{ item.specification || '默认规格'}}</text>
								<!-- <text
									style="flex: 1;">({{ item.productSpecPackageManner ? `${item.productSpecPackageQuantity}${item.productSpecPackageManner}/${item.productSpecPackageUnit}` : '散装' }})</text> -->
								<!-- <view class="trace" v-if="item.batchNo && role === 'buy'" @click.stop="trace(item)">
									追溯
								</view> -->
							</view>
							<view class="weight">
								<view class="item">
									毛重/毛单价：{{ item.grossWeight }}斤【{{ (item.price/item.grossWeight).toFixed(2) }}元/斤】
								</view>
								<view class="item">
									净重/净单价：{{ item.netWeight }}斤【{{ (item.price/item.netWeight).toFixed(2)  }}元/斤】
								</view>
							</view>
							<view class="price-wrapper">
								<view class="price">
									{{ item.price }}元/件
								</view>
								<view class="price">
									x{{item.quantity}}
								</view>
							</view>
						</view>
					</view>
					<view class="snapshot-wrapper" @click.stop="goSnapshot(item)">
						<text>交易快照</text>
						<view class="text">发生争议时，可作为判断依据</view>
						<uni-icons type="right" size="16" color="#999999"></uni-icons>
					</view>
					<view v-if="item.afterSaleRefund" class="snapshot-wrapper"
						@click.stop="goRefund(item.afterSaleRefund)">
						<text>售后退款</text>
						<text v-if="item.afterSaleRefund.refundStatus === 0" style="font-size: 28rpx;">(待退款)</text>
						<text v-else-if="item.afterSaleRefund.refundStatus === 1" style="font-size: 28rpx;">(已退款)</text>
						<text v-else-if="item.afterSaleRefund.refundStatus === 2"
							style="font-size: 28rpx;">(退款失败)</text>
						<view class="amount">{{ (item.afterSaleRefund.amount / 100).toFixed(2) }}元</view>
						<uni-icons type="right" size="14" color="#999999"></uni-icons>
					</view>
					<view v-if="item.adjustRefundList" class="snapshot-wrapper"
						@click.stop="goRefund(item.adjustRefundList)">
						<text>差价退款</text>
						<text v-if="item.adjustRefundList.refundStatus === 0" style="font-size: 28rpx;">(待退款)</text>
						<text v-else-if="item.adjustRefundList.refundStatus === 1"
							style="font-size: 28rpx;">(已退款)</text>
						<text v-else-if="item.adjustRefundList.refundStatus === 2"
							style="font-size: 28rpx;">(退款失败)</text>
						<view class="amount">{{ (item.adjustRefundList.amount / 100).toFixed(2) }}元</view>
						<uni-icons type="right" size="14" color="#999999"></uni-icons>
					</view>
				</view>
			</view>
			<!-- <view class="recommend-wrapper" @click="goShop(1)" v-if="form.order.orderType === 1">
				<text>{{ form.order.marketingOrgName }} 推荐</text>
				<uni-icons type="right" size="18" color="#898989"></uni-icons>
			</view> -->
			<!-- <view class="remark" v-if="form.order.orderRemark">
				备注 : {{ form.order.orderRemark }}
			</view> -->
		</view>
		<view class="form-wrapper">
			<view class="title-wrapper">
				<view class="title">
					订单付款
				</view>
				<!-- <view class="edit"
					v-if="role === 'sell' && ((form.order.orderStatus === 0 && form.order.totalAmount !== -1))"
					@click="editProducts(1)">
					修改
				</view> -->
			</view>
			<view class="item">
				<view class="label">
					商品总额
				</view>
				<view class="value">
					{{ form.productPayment + '元'}}
				</view>
			</view>
			<view class="item">
				<view class="label">
					代采费
				</view>
				<view class="value">
					<text>{{ form.serviceFee.toFixed(2) }}元</text>
				</view>
			</view>
			<view class="item">
				<view class="label">
					运费
				</view>
				<view class="value">
					<text>{{ form.freight.toFixed(2) }}元</text>
				</view>
			</view>
			<view class="item">
				<view class="label">
					金融手续费
				</view>
				<view class="value">
					<text>{{ form.payFee.toFixed(2) }}元</text>
				</view>
			</view>
			<view class="item" v-if="form.voucherId">
				<view class="label">
					代金券
				</view>
				<view class="value" style="color: #FF4403;">
					<text>减{{ form.voucherFee.toFixed(2)+ '元' }}</text>
				</view>
			</view>
			<view class="item">
				<view class="label">
					支付总额
				</view>
				<view class="value">
					<text>{{ form.amount.toFixed(2) }}元</text>
				</view>
			</view>
			<!-- <view class="item">
				<view class="label">
					优惠金额
				</view>
				<view class="value">
					<text
						v-if="form.order.orderStatus !== 0 && paymentType != -1">{{ form.order.discountAmount.toFixed(2)+ '元' }}</text>
					<text v-else>-</text>
				</view>
			</view> -->
			<!-- <view class="item" v-if="role === 'sell' && form.order.orderStatus === 0">
				<view class="item-tip">
					平台暂不支持在线付款，在完成确认前，请与买家沟通，通过微信转账、货到付款（赊欠）等方式确定付款方式。
				</view>
			</view> -->
			<!-- <view class="item">
				<view class="label">
					运费
				</view>
				<view class="value">
					{{ (form.order.freightAmount || form.order.freightAmount === 0) ? form.order.freightAmount.toFixed(2)+ '元' : '待定'}}
				</view>
			</view> -->
		</view>
		<view class="evaluate-wrapper" v-if="false">
			<view class="title-wrapper">
				<view class="title">
					客户评价
				</view>
			</view>
			<view class="content-wrapper" v-if="evaluationList.length">
				<view class="buyer-info">
					<image :src="form.order.purchaseOrgLogo || '../../../../assets/images/user-fallback.png'"
						class="avatar" mode="widthFix"></image>
					<view class="info">
						<view class="title">
							{{ form.order.purchaseOperaName }}
						</view>
						<view class="date">
							{{ evaluationList[0].createTime.substring(0,10) }}
						</view>
					</view>
				</view>
				<view class="score-wrapper">
					<uni-rate :readonly="true" :value="evaluationList[0].goodsStar" />
					<text class="text">{{ statusList[evaluationList[0].goodsStar] }}</text>
				</view>
				<view v-for="(item,index) in evaluationList" :key="index">
					<view class="added" v-if="index!==0 && item.purchaseAccountId">
						<text>客户追评</text>
						<text>{{ item.createTime.substring(0,10) }}</text>
					</view>
					<view v-if="item.purchaseAccountId" class="evaluate-content">
						<view class="text">
							{{ item.content || ''}}
						</view>
						<view v-if="item.imgUrls" class="images-wrapper">
							<image @click="openPic(item.imgUrls.split(','),imgIndex)"
								v-for="(imgItem,imgIndex) in item.imgUrls.split(',')" :src="imgItem"
								class="evaluate-image" mode="aspectFill"></image>
						</view>
					</view>
					<view v-else class="seller-reply">
						<view class="title">
							<text>店家回复</text>
							<text>{{ item.createTime.substring(0,10) }}</text>
						</view>
						<view class="text">
							{{ item.content }}
						</view>
						<view v-if="item.imgUrls" class="images-wrapper">
							<image @click="openPic(item.imgUrls.split(','),imgIndex)"
								v-for="(imgItem,imgIndex) in item.imgUrls.split(',')" :src="imgItem"
								class="evaluate-image" mode="aspectFill"></image>
						</view>
					</view>
				</view>

				<view class="btn" v-if="role === 'buy' || form.order.sellerOrgId === marketing.orgId"
					@click="goEvaluation">
					{{ role === 'sell' ? '回复' : '追评' }}
				</view>
			</view>


			<view class="no-evaluate" v-else>
				<view class="text">
					{{ role==='sell' ? '暂未收到评价！':'您尚未对本次采购进行评价!' }}
				</view>
				<view class="btn" v-if="role==='buy'" @click="evaluate">
					去评价
				</view>
			</view>
		</view>
		<view class="form-wrapper">
			<view class="title-wrapper">
				<view class="title">
					订单详情
				</view>
			</view>
			<view class="item">
				<view class="label">
					订单编号
				</view>
				<view class="value">
					{{ form.orderCode || '-' }}
				</view>
			</view>
			<view class="item">
				<view class="label">
					下单时间
				</view>
				<view class="value">
					{{ form.createTime }}
				</view>
			</view>
			<view class="item" v-if="form.orderStatus === 1">
				<view class="label">
					支付时间
				</view>
				<view class="value">
					{{ form.payTime }}
				</view>
			</view>
		</view>
		<!-- <view class="form-wrapper" v-if="form.refunds.length" style="margin-bottom:50upx">
			<view class="title-wrapper">
				<view class="title">
					售后服务单
				</view>
			</view>
			<view class="refund-wrapper">
				<view class="reason-wrappers" @click="goRefundsDetail(item)" :key="index"
					v-for="(item,index) in form.refunds">
					<view class="reason-item">
						<text class="label">申请状态：</text>
						<text class="status"
							:class="{'processing':item.refundStatus < 3,'success': item.refundStatus > 2 && item.refundStatus < 5}">{{ refundStatusList[item.refundStatus] }}</text>
					</view>
					<view class="reason-item">
						<text class="label">申请原因：</text>
						<text>{{ item.reason }}</text>
					</view>
					<view class="reason-item">
						<text class="label">申请说明：</text>
						<text>{{ item.reasonText }}</text>
					</view>
					<view class="reason-item">
						<text class="label">申请时间：</text>
						<text>{{ item.createTime }}</text>
					</view>
				</view>
			</view>
		</view> -->

		<!-- <view class="btn-box">
			<button v-if="form.orderStatus === 0" type="default" size="mini" plain="true" class="btn default"
				@click.stop="cancelOrder">取消订单</button>
			<button v-if="form.orderStatus === 0" type="primary" size="mini" class="btn primary"
				@click.stop="placeOrder">去支付</button>
			<button v-if="form.orderStatus > 0" type="default" size="mini" plain="true"
				class="btn default">再来一单</button>
		</view> -->

		<!-- <uni-popup ref="cancelDialog">
			<view class="popup-wrapper center">
				<view class="confirm-tip">
					请确认
				</view>
				<view class="content-wrapper">
					<view class="text">
						您是否要取消本订单？
					</view>
					<view class="text">
						取消订单前，您应该与买方进行沟通并达成一致意见。
					</view>
					<view class="text">
						禁止单方面未与买方达成一致意见的情况下取消订单。
					</view>
				</view>
				<view class="btn-wrapper">
					<view class="btn cancel" @click="chat">
						去沟通
					</view>
					<view class="btn" @click="cancelOrderConfirm">
						确定
					</view>
				</view>
			</view>
		</uni-popup> -->

	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				role: '',
				method: '',
				form: {},
				dialogText: '',
				hours: [],
				selectDate: '',
				logisticsMode: 0,
				logisticsUrl: '',
				orderStatusListByBuy: [{
						name: '待支付',
						tip: '您已拍下本订单, 等待支付中!'
					},
					{
						name: '预定成功',
						tip: '客户已下单支付，待总仓送货后，安排客户提货'
					},
					{
						name: '已取消',
						tip: '订单已取消'
					},
					{
						name: '被拒单',
						tip: '订单已被商家取消!'
					}
				],
				refundStatusList: ['待处理', '待退货', '待退款', '已完成-待评价', '已完成', '已取消', '退款中'],
				paymentTypeList: ['微信', '支付宝', '银联', '钱包', '现金', '其他'],
				statusList: ['', '非常差', '差', '一般', '好', '非常好'],
				evaluationList: [], // 评价列表
				productAmount: 0, // 货品总额
				paidIn: 0.00, //实收
				paymentType: -1,
				owe: 0, // 赊欠
				freight: '', //运费
			}
		},
		onLoad(option) {
			this.id = option.id;
			//this.role = option.role;
		},
		onShow() {
			this.getData()
			//this.getEvaluation()
		},
		computed: {
			payMinute() {
				let minte = 0;
				if (this.form.orderStatus === 0) {
					const now = new Date().getTime();
					const createTime = new Date(this.form.createTime).getTime();
					let difftime = (createTime - now) / 1000 + 3600;
					var minutes = parseInt(difftime % 3600 / 60);
					minte = minutes < 0 ? 0 : minutes
				}
				return minte
			},
			paySecond() {
				let second = 0;
				if (this.form.orderStatus === 0) {
					const now = new Date().getTime();
					const createTime = new Date(this.form.createTime).getTime();
					let difftime = (createTime - now) / 1000 + 3600;
					var seconds = parseInt(difftime % 60);
					second = seconds < 0 ? 0 : seconds
				}
				return second
			},
			// cancelOrderBtn() {
			// 	let flag = false;
			// 	const orgId = this.$store.state.userInfo.orgRelation.orgId
			// 	const statusList = [0, 1, 2, 3]
			// 	if (this.role === 'buy' && this.form.order && this.form.order.orderStatus === 0) {
			// 		flag = true;
			// 	} else if (this.role === 'sell' && this.form.order && this.form.order.sellerOrgId === orgId && statusList
			// 		.includes(this.form
			// 			.order.orderStatus)) {
			// 		flag = true;
			// 	}
			// 	return flag;
			// },
		},
		methods: {
			async getData() {
				const data = await this.$api.get('/app/order/getInfo', {
					id: this.id
				}, false);
				if (data.code === 200) {
					data.data.itemList.forEach(item => {
						if (item.mainImageVideo) {
							const mainImageVideo = JSON.parse(item.mainImageVideo)[0]
							if (mainImageVideo.type === 0) {
								item.productImage = mainImageVideo.url + '?imageView2/3/w/300/q/100'
							} else {
								item.productImage = mainImageVideo.url + '?vframe/jpg/offset/1'
							}
						}
						if (data.data.refundList) {
							item.afterSaleRefund = data.data.refundList.find(row => row.productId === item
								.productId && row.refundType === 9)
							item.adjustRefundList = data.data.refundList.find(row => row.productId === item
								.productId && row.refundType === 2)
						}
						if (data.data.refundList) {
							data.data.itemList.forEach((element) => {
								element.refund = data.data.refundList.find(
									(item) =>
									item.productId === element.productId &&
									(item.refundType === 9 || item.refundType === 2)
								);
							});
							data.data.cancelOrderRefund = data.data.refundList.find(
								(item) => item.refundType === 0
							);
							data.data.rejectOrderRefund = data.data.refundList.find(
								(item) => item.refundType === 1
							);
						}
					})
					this.form = data.data;
				}
			},
			goRefund(row) { //前往退款详情页
				uni.navigateTo({
					url: '/subPage_order/refund?info=' + JSON.stringify(row)
				})
			},
			async getEvaluation() {
				const data = await this.$api.get('/clz-portal/order-evaluation/list', {
					orderId: this.id
				}, false)
				if (data.code === 200) {
					console.log(data.data)
					this.evaluationList = data.data.reverse();
				}
			},
			goProductDetail(item) {
				uni.navigateTo({
					url: '/subPage_product/productDetail?id=' + item.productId
				})
			},
			goSnapshot(item) {
				uni.navigateTo({
					url: '/subPage_product/productSnapshot?id=' + item.snapshotId
				})
			},
			goEvaluation() {
				uni.navigateTo({
					url: '/subPage_order/evaluate?id=' + this.id + '&role=' + this.role +
						"&orgId=" + this.form.order.sellerOrgId
				})
			},
			cancelOrder() {
				uni.showModal({
					title: '取消订单',
					content: '是否要取消订单？',
					success: async (e) => {
						if (e.confirm) {
							await this.$api.post('/app/order/cancel', {
								id: this.form.id
							})
							this.getData()
						}
					}
				})
			},
			async cancelOrderConfirm() {
				if (this.form.order.orderStatus === 0) {
					const data = await this.$api.post('/clz-portal/order/cancel', {
						id: this.id,
						cancelRemark: this.role === 'buy' ? '客户自行取消订单' : '商家取消订单'
					});
					if (data.code === 200) {
						this.$refs.cancelDialog.close();
						this.$refs.alertDialog3.close();
						uni.showToast({
							icon: "success",
							title: '已取消'
						})
						this.getData()
					}
				} else {
					this.$refs.cancelDialog.close();
					uni.navigateTo({
						url: '/subPage_order/cancelOrder?id=' + this.id
					})
				}
			},
			placeOrder() {
				this.placeOrderConfirm()
			},
			async placeOrderConfirm() {
				uni.showModal({
					title: '支付',
					content: '是否进行支付？',
					success: async (e) => {
						if (e.confirm) {
							await this.$api.post('/app/order/pay', {
								id: this.form.id
							})
							this.getData()
						}
					}
				})
				// uni.navigateTo({
				// 	url: '/subPage_products/pay'
				// })
			},
			openPic(urls, index) {
				uni.previewImage({
					urls: urls,
					current: index
				});
			}
		},
		components: {

		}
	}
</script>

<style lang="scss" scoped>
	.orderDetail {
		height: 100%;
		overflow: auto;
		padding-bottom: 150upx;

		.order-status-wrapper {
			background-color: #F26022;
			display: flex;
			align-items: center;
			padding: 40upx 0;

			.icon {
				width: 112upx;
				height: 112upx;
				margin: 0 26upx 0 52upx;
			}

			.info-wrapper {
				flex: 1;

				.status {
					font-size: 40upx;
					color: #ffffff;
					line-height: 40upx;
					display: flex;

					.time {
						margin-left: 30upx;
						display: flex;
						font-size: 30upx;
						align-items: center;
					}
				}

				.info {
					font-size: 26upx;
					color: #edebcc;
					margin-top: 20upx;
					padding-right: 30upx;
				}
			}
		}

		.form-wrapper {
			background-color: #ffffff;
			border-radius: 20upx;
			margin: 20upx 20upx 0 20upx;
			padding-bottom: 14upx;
			overflow: hidden;

			.title-wrapper {
				height: 40upx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin: 26upx 0;

				.title {
					color: #000000;
					font-weight: bold;
					font-size: 34upx;
					height: 34upx;
					line-height: 34upx;
					border-left: 10upx solid #F26022;
					padding-left: 18upx;

				}

				.edit {
					color: #F26022;
					font-size: 32upx;
					margin-right: 32upx;
				}
			}

			.item {
				display: flex;
				align-items: center;
				font-size: 32upx;
				line-height: 32upx;
				padding: 0 32upx;
				margin-bottom: 26upx;
				position: relative;

				.label {
					position: absolute;
					top: 0;
					color: #5B5B5B;
					margin-right: 30upx;
				}

				.value {
					color: #313131;
					flex: 1;
					text-align: right;
					margin-left: 180upx;

					.icon {
						position: relative;
						top: 2upx;
					}

					.placeholder {
						color: #999999;
					}

					.btn {
						color: #F26022;
						margin-left: 20upx;
					}
				}

				.item-tip {
					flex: 1;
					border-radius: 10upx;
					background-color: #f5f5f5;
					color: #FF5733;
					font-size: 28upx;
					padding: 20upx 20upx;
					line-height: 34upx;
				}
			}

			.reason-wrapper {
				padding: 20upx 32upx 0 32upx;
				overflow: hidden;

				.text {
					color: #232323;
					margin-top: 20upx;
				}

				.images-list {
					margin-top: 10upx;
					display: flex;
					flex-wrap: wrap;

					.image-item {
						width: 205upx;
						height: 205upx;
						margin-right: 20upx;
						margin-bottom: 20upx;
						border-radius: 10upx;
						overflow: hidden;
						position: relative;

						&:nth-child(3n) {
							margin-right: 0;
						}
					}

					.reason-image {
						width: 205upx;
						height: 205upx;
					}
				}
			}

			.line {
				height: 2upx;
				background-color: #E5E5E5;
				margin: 36upx 32upx 36upx 32upx;
			}
		}

		.evaluate-wrapper {
			background-color: #ffffff;
			border-radius: 20upx;
			margin: 20upx 20upx 0 20upx;
			padding-bottom: 14upx;
			overflow: hidden;

			.title-wrapper {
				height: 40upx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin: 26upx 0;

				.title {
					color: #000000;
					font-weight: bold;
					font-size: 34upx;
					height: 34upx;
					line-height: 34upx;
					border-left: 10upx solid #F26022;
					padding-left: 18upx;

				}
			}

			.content-wrapper {
				padding: 0 32upx 32upx 32upx;

				.buyer-info {
					display: flex;
					align-items: center;

					.avatar {
						width: 80upx;
						height: 80upx;
						border-radius: 50%;
						margin-right: 20upx;
					}

					.info {
						.title {
							font-size: 32upx;
							color: #2B2B2B;
						}

						.date {
							font-size: 28upx;
							color: #777777;
						}
					}
				}

				.score-wrapper {
					margin: 20upx 0;
					display: flex;
					align-items: center;
					font-size: 28upx;
					color: #777777;

					.text {
						margin-left: 14upx;
					}
				}

				.added {
					margin-top: 20upx;
					color: #ff8800;
					display: flex;
					align-items: center;
					justify-content: space-between;
				}

				.evaluate-content {
					.text {
						font-size: 32upx;
						color: #2B2B2B;
					}

					.images-wrapper {
						display: flex;
						flex-wrap: wrap;
						margin-top: 20upx;

						.evaluate-image {
							position: relative;
							width: 32%;
							height: 206upx;
							border-radius: 20upx;
							overflow: hidden;
							margin-left: 2%;
							margin-bottom: 20upx;

							&:nth-child(3n+1) {
								margin-left: 0;
							}
						}
					}
				}

				.seller-reply {
					margin-top: 20upx;
					background-color: #F2F4FA;
					border-radius: 10upx;
					padding: 14upx;
					font-size: 28upx;
					color: #444444;

					.title {
						color: #313131;
						display: flex;
						align-items: center;
						justify-content: space-between;
					}

					.images-wrapper {
						display: flex;
						flex-wrap: wrap;
						margin-top: 20upx;

						.evaluate-image {
							position: relative;
							width: 32%;
							height: 206upx;
							border-radius: 20upx;
							overflow: hidden;
							margin-left: 2%;
							margin-bottom: 20upx;

							&:nth-child(3n+1) {
								margin-left: 0;
							}
						}
					}
				}
			}

			.btn {
				width: 100upx;
				height: 56upx;
				border: 2upx solid #F26022;
				border-radius: 10upx;
				color: #F26022;
				font-size: 28upx;
				margin: 32upx 32upx 32upx 0;
				float: right;
				display: flex;
				align-items: center;
				justify-content: center;
				transition: .1s linear;

				&:active {
					background-color: #F2602222;
				}
			}

			.no-evaluate {
				.text {
					margin: 0 32upx;
					color: #444444;
				}

				.btn {
					float: none;
					margin: 30upx auto;
					width: 300upx;
				}
			}
		}

		.products-wrapper {
			background-color: #ffffff;
			border-radius: 20upx;
			margin: 20upx 20upx 0 20upx;
			padding-bottom: 34upx;
			overflow: hidden;

			.title-wrapper {
				height: 40upx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin: 26upx 0;

				.title {
					color: #000000;
					font-weight: bold;
					font-size: 34upx;
					height: 34upx;
					line-height: 34upx;
					border-left: 10upx solid #F26022;
					padding-left: 18upx;

				}

				.edit {
					color: #F26022;
					font-size: 32upx;
					margin-right: 32upx;
				}
			}

			.info-wrapper {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 32upx;

				.info {
					font-size: 32upx;
					color: #5B5B5B;
				}

				.name {
					word-break: break-all;
					font-size: 34upx;
					color: #212121;
				}

				.contact {
					display: flex;
					color: #F26022;
					align-items: center;
					white-space: nowrap;
					margin-left: 10upx;

					.message-wrapper {
						width: 40upx;
						height: 40upx;
						display: flex;
						align-items: center;
						justify-content: center;
						background-color: #EDFAF5;
						border-radius: 50%;
						margin-right: 12upx;

						.message-icon {
							position: relative;
							top: -2upx;
						}
					}
				}
			}

			.products-list {
				.product {
					padding: 0 32upx;
					margin-top: 20upx;

					.product-box {
						display: flex;
					}

					.snapshot-wrapper {
						display: flex;
						margin-top: 20rpx;
						align-items: center;
						font-size: 32rpx;

						.text {
							flex: 1;
							text-align: right;
							font-size: 28rpx;
							color: #666666;
						}

						.amount {
							flex: 1;
							text-align: right;
							font-size: 30rpx;
							color: #222222;
						}
					}

					.icon {
						width: 160upx;
						height: 160upx;
						border-radius: 20upx;
						margin-right: 22upx;
					}

					.product-info {
						background-color: #F2602211;
						padding: 20upx;
						border-radius: 10upx;
						flex: 1;

						.title {
							font-size: 32upx;
							color: #000000;
							//font-weight: bold; 
							line-height: 40upx;
							text-overflow: -o-ellipsis-lastline;
							overflow: hidden; //溢出内容隐藏
							text-overflow: ellipsis; //文本溢出部分用省略号表示
							display: -webkit-box; //特别显示模式
							-webkit-line-clamp: 2; //行数
							line-clamp: 2;
							-webkit-box-orient: vertical; //盒子中内容竖直排列 
						}

						.spec {
							font-size: 30upx;
							color: #5B5B5B;
							line-height: 30upx;
							margin-top: 14upx;
							display: flex;
							align-items: center;

							.trace {
								width: 130upx;
								height: 50upx;
								border: 1upx solid #F26022;
								border-radius: 10upx;
								color: #F26022;
								font-size: 28upx;
								display: flex;
								align-items: center;
								justify-content: center;
								margin-left: 60upx;
							}
						}

						.weight {
							font-size: 26upx;
							color: #5B5B5B;
							line-height: 30upx;

							.item {
								margin-top: 8rpx;
							}
						}

						.price-wrapper {
							margin-top: 24upx;
							display: flex;
							align-items: center;
							justify-content: space-between;
							font-size: 30upx;
							line-height: 30upx;

							.price {
								color: #F26022;
								font-size: 34rpx;
							}

							.quantity {
								color: #F26022;

								&.return {
									color: #FF8D1A;
								}
							}
						}

						.tip {
							color: #FF8D1A;
							font-size: 28upx;

							&.first {
								margin-top: 20upx;
							}
						}
					}
				}
			}

			.recommend-wrapper {
				display: flex;
				align-items: center;
				font-size: 32upx;
				color: #5B5B5B;
				padding: 0upx 32upx;
				margin-top: 20upx;
			}

			.remark {
				background-color: #F2F4FA;
				margin: 48upx 32upx 0upx 32upx;
				padding: 26upx;
				color: #2B2B2B;
			}
		}


		.btn-box {
			height: 108upx;
			position: fixed;
			background-color: #ffffff;
			width: 100%;
			left: 0;
			bottom: 0;
			display: flex;
			padding: 0 32upx;
			box-shadow: 0 0 10upx 0 #cecece;
			box-sizing: border-box;

			.btn {
				margin-top: 16upx;
				height: 76upx;
				flex: 1;
				border-radius: 40upx;
				font-size: 28upx;
				margin-right: 20upx;
				display: flex;
				align-items: center;
				justify-content: center;

				&:last-child {
					margin-right: 0;
				}

				&.default {
					border-color: #B8B8B8;
					color: #5B5B5B;

					&:active {
						background-color: #E3E3E3;
						border-color: #E3E3E3;
					}
				}

				&.plain {
					background-color: #ffffff;
					border: 2upx solid #F26022;
					color: #F26022;

					&:active {
						background-color: #F2602266;
					}
				}

				&.primary {
					background-color: #F26022;

					&:active {
						opacity: 0.7;
					}
				}

				&.disabled {
					background-color: #cecece !important;
				}

			}
		}

		.popup-wrapper {
			background-color: #ffffff;
			width: 680upx;
			overflow: hidden;
			border-radius: 20upx;
			padding-bottom: 30upx;

			.confirm-tip {
				font-size: 34upx;
				font-weight: bold;
				margin: 50upx 0;
				text-align: center;
			}

			.content-wrapper {
				margin-bottom: 40upx;
				padding: 0 40upx;
				text-align: center;

				.bold {
					font-weight: bold;
					margin-bottom: 20upx;
				}
			}

			.form-wrapper {
				margin-top: 70upx;

				.item {
					display: flex;
					align-items: center;
					justify-content: space-between;
					height: 50upx;
					padding: 0 32upx;
				}
			}

			.btn-wrapper {
				height: 108upx;
				width: 100%;
				height: 108upx;
				background-color: #ffffff;
				//box-shadow: 0px 4upx 8upx 0px rgba(0, 0, 0, .25);
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 0 32upx;
				box-sizing: border-box;

				.btn {
					flex: 1;
					height: 76upx;
					display: flex;
					align-items: center;
					justify-content: center;
					box-sizing: border-box;
					border-radius: 40upx;
					font-size: 32upx;
					margin-right: 26upx;
					background-color: #F26022;
					color: #ffffff;
					transition: .15s linear;

					&.cancel {
						background-color: #ffffff;
						border: 2upx solid #F26022;
						color: #F26022;
					}

					&:last-child {
						margin-right: 0;
					}

					&:active {
						background-color: #10ae35;

						&.cancel {
							background-color: #e9ebf0;
						}
					}
				}
			}
		}

		.refund-wrapper {
			padding: 0 20upx;

			.reason-wrappers {
				padding: 20upx 13upx 0 13upx;
				border-top: 1upx solid #efefef;

				&:first-child {
					padding-top: 0;
					border-top: 0;
				}

				.reason-item {
					display: flex;
					align-items: center;
					justify-content: space-between;
					color: #313131;
					line-height: 38upx;
					margin-bottom: 20upx;
					font-size: 32upx;

					.label {
						color: #5B5B5B;
					}

					.status {
						color: #666666;
					}

					.processing {
						color: red;
					}

					.success {
						color: #F26022;
					}
				}
			}
		}

		.popup-date-wrapper {
			height: 600upx;
			width: 100%;
			background-color: #ffffff;
			border-radius: 20upx 20upx 0 0;
			overflow: hidden;

			.title-wrapper {
				height: 88upx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 32upx;
				background-color: #f5f5f5;
			}

			.item-wrapper {
				display: flex;
				flex-wrap: wrap;
				padding: 32upx;

				.item {
					width: 120upx;
					height: 70upx;
					line-height: 70upx;
					text-align: center;
					background-color: #F6F6F6;
					margin-right: 20upx;
					border-radius: 10upx;
					margin-bottom: 20upx;

					&:nth-child(5n) {
						margin-right: 0;
					}
				}
			}
		}

		.popup-freight-wrapper {
			width: 650upx;
			background-color: #ffffff;
			height: 300upx;
			border-radius: 20upx;
			overflow: hidden;

			.title-wrapper {
				height: 100upx;
				display: flex;
				align-items: center;
				border-bottom: 1upx solid #cecece;
				padding-left: 32upx;
			}

			.input-wrapper {
				height: 112upx;
				padding: 15upx;
				box-sizing: border-box;

				.input {
					height: 80upx;
					width: 100%;
					background-color: #f1f1f1;
					text-align: center;
					border-radius: 10upx;
				}
			}

			.popup-btn-wrapper {
				display: flex;
				align-items: center;
				border-top: 1upx solid #cecece;

				.btn {
					height: 90upx;
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: center;
					background-color: #F26022;
					color: #ffffff;

					&.cancel {
						background-color: #ffffff;
						color: #2B2B2B;
					}
				}
			}
		}
	}
</style>